<template>
  <el-select class="z-select" :value-key="valKey" v-model="input">
    <el-option
      v-for="item in list"
      :label="$t(item[labelKey])"
      :value="valKey ? item : item[valueKey]"
      :disabled="disabledKey ? item[disabledKey] : false"
    ></el-option>
  </el-select>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import type { Props } from './type'

defineOptions({
  name: 'z-select'
})

const props = withDefaults(defineProps<Props>(), {
  labelKey: 'name',
  valueKey: 'id',
  disabledKey: 'disabled'
})
const { t } = useI18n()
const $t = (text: string = '') => {
  return props.i18n && text ? t((props.i18nPrefix ? props.i18nPrefix + '.' : '') + text) : text
}

const input = defineModel<string | number | AnyObject>()
</script>

<style lang="scss"></style>
